<template>
  <div class="wrapper w-full h-full flex flex-row gap-5">
    <div class="left flex-1 flex flex-col  gap-3">
      <el-card class=" h-[90px] ">
        <div class="header mt-2 h-full w-full flex flex-row items-center">
          <!-- <div class="backIcon">
            <span class="iconify color-[#6c6c6c] mx-2 text-2xl" data-icon="mdi:chevron-left"></span>
          </div> -->
          <div class="searchForm ml-auto">
            <el-form :inline="true" :model="formInline" class="flex flex-row">
              <el-form-item class="flex justify-center items-center w-[220px] !mb-0">
                <el-select placeholder="请选择标签类别">
                  <el-option v-for="item in opt1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item class=" flex justify-center items-center  w-[220px] !mb-0">
                <el-select placeholder="请选择图片状态">
                  <el-option v-for="item in opt1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>

              <el-form-item class="flex justify-center items-center   !mb-0">
                <el-button class="" type="primary" @click="query">查询</el-button>
                <el-button class="" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
      <el-card class="flex-1 picCard">
        <div class="content w-full h-full flex flex-col overflow-hidden">
          <section class="w-full h-[48px] flex flex-row">
            <section class="left flex items-center gap-1">
              <img src="/public/Menu.svg" class="!w-[18px]" />
              <span class="">图像列表</span>
            </section>
            <section class="rightBtn ml-auto flex items-center">
              <el-button type="primary" @click="importImage">导入图片</el-button>
              <el-button type="primary">导入标注</el-button>
              <el-button type="danger">删除图片</el-button>
              <el-button>刷 新</el-button>
            </section>
          </section>
          <section :class="{ 'content-start mt-3 ': com }"
            class="flex-1 picList  flex flex-wrap   w-full overflow-hidden justify-center items-center ">
            <div :class="{ 'chosen': curImageIndex === index, 'scale-95 !my-8 h-1/3': com }"
              class="pics  w-[220px] h-[36%] m-3 cursor-pointer box-border" v-for=" (img,
                index) in imgList" :key="img.fileUrl + index">
              <img :src="img.fileUrl" @click="setCurIndex(index)"
                class="w-full h-full no-select p-1 rounded-3 hover:scale-102 transition-all" />
              <span :title="img.name" class="text-center !block w-full p-2 text-ellipsis text-nowrap overflow-hidden">{{
                img.name
              }}</span>
            </div>
            <div v-if="!imgList.length" class="empty">
              <el-empty v-if="!com">
                <template #description>
                  <p>暂无文件，请先<a class="upload" @click="importImage">上传</a></p>
                </template>
              </el-empty>
              <el-empty v-else>
                <template #description>
                  <p>当前项目无图库，请先<a class="upload" @click="openChooseGallery">选择图库</a></p>
                </template>
              </el-empty>
            </div>
          </section>
          <pagination class="myPagination" layout=" total, prev, pager, next, jumper," v-show="total > 0" :total="total"
            v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" @pagination="getList" />
        </div>
      </el-card>
    </div>
    <div class="right w-[350px] h-full flex flex-col gap-1">
      <el-card class="h-full w-full">
        <section class="galleryProperty w-full h-[35%]">
          <p class="title">图库属性</p>
          <p>图库名称： {{ queryRaw.name }}</p>
          <p>所属项目： {{ queryRaw.projects }}</p>
          <p>图库类型： {{ queryRaw.type }}</p>
          <p>图像数量： {{ queryRaw.imageCount }}</p>
          <p>已标注数： {{ queryRaw.markNum }}</p>
        </section>
        <section class="divide bg-[url(/public/divider.png)]  h-[9%] bg-contain bg-no-repeat bg-center scale-300">
        </section>
        <section class="picProperty flex-1 w-full">
          <p class="title">图像属性</p>
          <p>图像名称： {{ singleClickedPic.name }}</p>
          <p>分辨率： {{ singleClickedPic.fileResolution }}</p>
          <p>上传时间： {{ singleClickedPic.createTime }}</p>
          <p>图像状态： {{ singleClickedPic.labels?.length > 0 ? '已标注' : '未标注' }}</p>
          <div class="tags flex h-[155px]">
            <span class="pt-4 pl-2">图像标签:</span>
            <div class="tagNames">
              <span class="tagName" v-for="(tag, index) in singleClickedPic.labels" :key="index" :calss="tag.color">{{
                tag.name }}</span>
            </div>
          </div>
          <el-button type="primary" class=" translate-y-2" @click="goAnnotation">前往标注</el-button>
        </section>
      </el-card>
    </div>
  </div>
  <gallerySelectForm width="80%" ref="picSelectFormRef" :dbClickData="receiveDbClick" />
  <!-- {{ JSON.stringify(chosengallery) }} -->
</template>

<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import Bus from '@/components/uploadCom/utils/bus'
import { galleryImagesPage } from '@/api/gallery-upload'
import { propTypes } from '@/utils/propTypes';
import gallerySelectForm from '../a-gallery/picSelectForm.vue';


// com 表示是直接路由访问还是子组件的访问的标识， true 表示是子路由访问
const { com } = defineProps({
  com: propTypes.bool.def(false)
})
let picSelectFormRef = ref();
const message = useMessage()
let curImageIndex = ref(0)
let routes = useRoute()
let router = useRouter()
let singleClickedPic = ref({
  name: '',
  fileResolution: '',
  createTime: '',
  labels: [],
  status: '',
} as any)
let queryRaw = reactive({ id: 0 })
if (routes.query.row) {
  queryRaw = JSON.parse(routes.query.row as unknown as string)
}
const imgList = ref([])
let total = ref(0)
const formInline = ref({})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  keyword: '',
  status: '',
  sort: '',
  sortType: '',
})
let opt1 = [{ label: '', value: '' }]
// let chosengallery = ref({})

// 前往标注页
const goAnnotation = () => {
  router.push({
    name: 'annotationIndex',
    query: { row: JSON.stringify(queryRaw) }
    // 通过地址栏传参数
  })
}

const receiveDbClick = (row) => {
  queryRaw = row
  message.success(`已选择【${row.name}】图库`)
  getList({}, row.id)
}

const openChooseGallery = () => {
  picSelectFormRef.value.open()
}

const reset = () => { }

const query = () => { }

const importImage = () => {
  Bus.emit('openUploader', {
    // 给服务端的额外参数
    params: {
      galleryId: queryRaw.id,
    },
    options: {
      // 3000端口 http://localhost:3000/upload
      target: `${import.meta.env.VITE_BASE_URL}/admin-api/gallery/file/upload`,
      query: { upload_token: 'my_token' }
    }
  })
}

const initSingleClickedPic = () => {
  if (singleClickedPic.value && singleClickedPic.value.labels === null) {
    singleClickedPic.value.status = '未标注'
    singleClickedPic.value.labels = []
  }
}
const setCurIndex = (index) => {
  curImageIndex.value = index;
  singleClickedPic.value = imgList.value[index] ? imgList.value[index] : {}
  console.log(singleClickedPic.value)
  initSingleClickedPic()
  // console.log(singleClickedPic.value)
}

const getList = async (obj?, id?: number) => {
  // console.log(queryRaw, id)
  const res = await galleryImagesPage({
    galleryId: id ?? queryRaw.id,
    pageNo: queryParams.pageNo,
    pageSize: queryParams.pageSize
  })
  // console.log(res)
  imgList.value = []
  imgList.value = res.list
  total.value = res.total
  singleClickedPic.value = imgList.value[0] ? imgList.value[0] : {}
  initSingleClickedPic()
}
onMounted(() => {
  getList()
  // 文件选择后的回调
  Bus.on('fileAdded', () => {
    console.log('文件已选择')
  })

  // 文件上传成功的回调
  Bus.on('fileSuccess', ({ file }) => {
    // console.log(file)
    // fileList.value.push(file)
    console.log('文件上传成功')
    // console.log(fileList.value)
  })
})

onBeforeUnmount(() => {
  Bus.off('fileAdded')
  Bus.off('fileSuccess')
})
</script>

<style lang="scss" scoped>
.el-dialog {
  :deep() {
    --el-dialog-margin-top: 30vh;
  }
}

.chosen {
  border: 2px solid #1989fa;
}

.no-select {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* 标准语法 */
}

.empty {

  .upload {
    color: #1989fa;
    cursor: pointer;
  }
}

.wrapper {
  .left {
    .picCard {
      :deep() {
        .el-card__body {
          width: 100%;
          height: 100%;
          overflow: hidden;

          .el-pagination {

            .el-pagination__total {
              margin-right: auto;
            }
          }
        }
      }
    }

    :deep() {}
  }

  .right {
    :deep() {
      .el-card__body {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
    }

    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    box-shadow: 1px 3px 5px 2px rgba(205, 203, 203, 0.1);
    font-family: -regular;
    border: 1px solid rgba(187, 187, 187, .5);

    .divide {}

    .galleryProperty,
    .picProperty {
      .title {
        width: 112px;
        height: 39px;
        line-height: 39px;
        color: rgba(64, 149, 229, 1);
        font-size: 28px;
        text-align: left;
        font-family: PingFangSC-bold;
      }

      p {
        &:not(:first-of-type) {
          text-align: left;
          padding: 13px 8px;
        }
      }
    }

  }
}
</style>
